<template>
  <div class="main_box">
    <div class="common_Box">
      <div class="title_box">
        <div class="blue_radio"></div>
        <div class="title">常用功能</div>
      </div>
      <div class="app_box">
        <div @click="getTo(item.url)" class="app" v-for="(item, index) in commonList" :key="index">

          <a href="#">
            <img :src="item.src" alt="">
          </a>
          <span> {{ item.name }}</span>
        </div>
      </div>

    </div>
    <div class="visualization_Box">
      <div class="title_box">
        <div class="blue_radio"></div>
        <div class="title">数据可视化</div>
      </div>
      <div class="app_box">
        <div @click="getTo(item.url)" class="app" v-for="(item, index) in visualizationList" :key="index">
          <a href="">

            <img :src="item.src" alt="">
          </a>
          <span> {{ item.name }}</span>
        </div>
      </div>
      <div class="title_box">
        <div class="blue_radio"></div>
        <div class="title">全企业链信息化管理</div>
      </div>
      <div>

        <div class="app_box" style="height: 14rem; border-bottom: 1px solid #a8a8a8;">

          <div class="app" v-for="(item, index) in productionList" :key="index">
            <a href="">

              <img :src="item.src" alt="">
            </a>
            <span> {{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="app_box" style="height: 14rem; border-bottom: 1px solid #a8a8a8;">
        <div class="app" v-for="(item, index) in processList" :key="index">
          <a href="">

            <img :src="item.src" alt="">
          </a>
          <span> {{ item.name }}</span>
        </div>
      </div>
      <div class="app_box" style="height: 28rem; ">
        <div class="app" v-for="(item, index) in marketList" :key="index">

          <a href="">
            <img :src="item.src" alt="">
          </a>
          <span> {{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="allAPP_Box"></div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      commonList: [
        { name: '企业概况', src: require('@/assets/ipad/qiye2(21).png') },
        { name: '采集数据', src: require('@/assets/ipad/qiye2@2x(22).png') },
        { name: '销售数据', src: require('@/assets/ipad/qiye2(23).png') },
        { name: '库存数据', src: require('@/assets/ipad/qiye2@2x(24).png') },
        { name: '鱼池监控', src: require('@/assets/ipad/qiye2(25).png') },
        { name: '物流车量', src: require('@/assets/ipad/qiye2(26).png') },
        { name: '企业官网', src: require('@/assets/ipad/qiye2(27).png') },
        { name: '数据驾驶舱', src: require('@/assets/ipad/qiye2(28).png'), url: 'http://122.227.80.90:81/xunyu_iot_screen/#/./?companyId=' + 1 + '&baseId=' + 1 + '&Authorization=' + window.localStorage.getItem('token') }
      ],

      visualizationList: [
        { name: '企业概况', src: require('@/assets/ipad/qiye2(21).png') },
        { name: '采集数据', src: require('@/assets/ipad/qiye2@2x(22).png') },
        { name: '销售数据', src: require('@/assets/ipad/qiye2(23).png') },
        { name: '库存数据', src: require('@/assets/ipad/qiye2@2x(24).png') },
        { name: '鱼池监控', src: require('@/assets/ipad/qiye2(25).png') },
        { name: '物流车量', src: require('@/assets/ipad/qiye2(26).png') },
        { name: '企业官网', src: require('@/assets/ipad/qiye2(27).png') },
        { name: '数据驾驶舱', src: require('@/assets/ipad/qiye2(28).png'), url: 'http://122.227.80.90:81/xunyu_iot_screen/#/./?companyId=' + 1 + '&baseId=' + 1 + '&Authorization=' + window.localStorage.getItem('token') }
      ],
      productionList: [
        { name: '塘头采购单', src: require('@/assets/ipad/qiye2@2x.png'), url: '' },
        { name: '塘头进货单', src: require('@/assets/ipad/qiye2@2x(1).png'), url: '' },
        { name: '塘头采购单', src: require('@/assets/ipad/qiye2@2x(2).png'), url: '' },
        { name: '塘头采购单', src: require('@/assets/ipad/qiye2(3).png'), url: '' },
        { name: '塘头采购单', src: require('@/assets/ipad/qiye2@2x(4).png'), url: '' },
        { name: '塘头采购单', src: require('@/assets/ipad/qiye2@2x(5).png'), url: '' }
      ],
      // 加工管理
      processList: [
        { name: '应付总明细', src: require('@/assets/ipad/qiye2@2x(6).png'), url: '' },
        { name: '供应商应付明细', src: require('@/assets/ipad/qiye2@2x(7).png'), url: '' },
        { name: '应收总明细', src: require('@/assets/ipad/qiye2@2x(8).png'), url: '' },
        { name: '库存列表', src: require('@/assets/ipad/qiye2(9).png'), url: '' },
        { name: '出入库记录', src: require('@/assets/ipad/qiye2@2x(10).png'), url: '' },
        { name: '供应商列表', src: require('@/assets/ipad/qiye2(11).png'), url: '' }
      ],
      // 销售管理
      marketList: [
        { name: '客户列表', src: require('@/assets/ipad/qiye2(12).png'), url: '' },
        { name: '养殖管理', src: require('@/assets/ipad/qiye2@2x(13).png'), url: '' },
        { name: '狗鱼统计', src: require('@/assets/ipad/qiye2@2x(14).png'), url: '' },
        { name: '销售统计', src: require('@/assets/ipad/qiye2(15).png'), url: '' },
        { name: '价格统计', src: require('@/assets/ipad/qiye2@2x(16).png'), url: '' },
        { name: '成本统计', src: require('@/assets/ipad/qiye2(17).png'), url: '' },
        { name: '费用报表', src: require('@/assets/ipad/qiye2(18).png'), url: '' },
        { name: '销售收款', src: require('@/assets/ipad/qiye2(19).png'), url: '' },
        { name: '采购付款', src: require('@/assets/ipad/qiye2@2x(20).png'), url: '' }
      ]
    }
  },
  methods: {
    getTo(url) {
      // let url = 'http://60.163.198.70:81/xunyu_iot_map/#/./?companyId=' + this.searchForm.companyId + "&baseId=" + this.searchForm.baseId + "&Authorization=" + window.localStorage.getItem("token")
      // window.open = url;
      window.open(`${url}`, '_blank')
    }
  }
}
</script>
<style lang="less" scoped>
span {
  font-size: 1.6rem;
  font-weight: bold;
}

.title_box {
  display: flex;
  padding-top: 2rem;
  margin-left: 2rem;
  justify-items: center;

  .blue_radio {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background-color: rgb(69, 179, 248);
    margin-top: 1rem;
    margin-right: 0.5rem;
  }

  .title {
    font-size: 2rem;
    font-weight: bold;
  }
}

.app_box {
  width: 90%;
  height: 30rem;
  margin-top: 1rem;
  margin-left: 5rem;
  // background-color: aqua;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  .app {
    text-align: center;
    display: flex;
    justify-content: center;
    // padding-bottom: 2rem;

    display: grid;
    // grid-template-rows: 1fr 1fr;
    align-items: center;

    img {
      width: 7rem;
      height: 7rem;
    }
  }
}
</style>